<template>
  <!-- 1688商品属性组件 -->
  <div v-loading="loading" element-loading-text="加载中">
    <span class="font-red font-w mar-l-20">※ 请设置1688平台相关商品属性，发布/更新商品需要</span>
    
    <el-form label-position="right" class="pad-20" :model="propertyForm" :rules="rules" ref="propertyForm">

      <el-form-item label-width="130px" label="商品分类：" prop="openAlibabaCategoryId">
        <el-cascader v-model="openAlibabaCategoryIds" 
          :options="openAlibabaCategoryData" 
          filterable
          clearable 
          class="width-300">
        </el-cascader>
      </el-form-item>

      <el-form-item label-width="130px" label="运费模板：" prop="openAlibabaFreightTemplateId">
        <el-select v-model="propertyForm.openAlibabaFreightTemplateId" class="width-300" clearable>
          <el-option v-for="item in freightTemplateList" :key="item.id" :label="item.name + '（' + item.addressCodeText + '）'" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="130px" label="发货地址：" prop="sendGoodsAddressId">
        <el-select v-model="propertyForm.sendGoodsAddressId" class="width-300" clearable>
          <el-option v-for="item in mySendAddressList" :key="item.id" :label="item.fullAddress.replaceAll('^^^', ' ')" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer mar-b-10">
      <el-button @click="doClose">取消</el-button>
      <el-button type="primary" @click="doSave">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { getThirdCategoryTree } from '@/api/goods/thirdCategory'
  import { doGetThirdGoodsById, getFreightTemplate, getMySendAddress, saveThirdGoods } from '@/api/third/thirdGoods'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 店铺id
      shopId: {
        type: String
      },
      // 商品对象
      goodsObj: {
        type: Object
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      },
      shopId(val) {
        if (val) {
          this.initByShopId()
        }
      }
    },
    data() {
      return {
        // 1688平台类型
        platformType: 7,
        // 商品属性对象
        propertyForm: {
          thirdGoodsId: '',
          enterpriseId: '',
          memberId: '',
          goodsId: '',
          shopId: '',
          openAlibabaCategoryId: '',
          openAlibabaFreightTemplateId: '',
          sendGoodsAddressId: '',
          sendGoodsAddressText: ''
        },
        // 分类model
        openAlibabaCategoryIds: [],
        // 表单规则
        rules: {
          openAlibabaCategoryId: [
            { required: true, message: '请选择商品类目', trigger: 'blur' }
          ],
          openAlibabaFreightTemplateId: [
            { required: true, message: '请选择运费模板', trigger: 'blur' }
          ],
          sendGoodsAddressId: [
            { required: true, message: '请选择发货地址', trigger: 'blur' }
          ]
        },
        // 1688商品分类列表
        openAlibabaCategoryData: [],
        // 运费模板列表
        freightTemplateList: [],
        // 我的发货地址
        mySendAddressList: [],
        loading: false
      }
    },
    created() {
      // 获取1688商品分类
      getThirdCategoryTree(this.platformType).then(response => {
        if (response.isError) return
        this.openAlibabaCategoryData = response.data
      })
      this.initByShopId()
    },
    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        const originData = this.$options.data()
        this.propertyForm = originData.propertyForm
        this.openAlibabaCategoryIds = originData.openAlibabaCategoryIds
        if (this.goodsObj.thirdGoodsId) {
          this.loading = true
          doGetThirdGoodsById({ thirdGoodsId: this.goodsObj.thirdGoodsId }).then(response => {
            if (response.isError) return
            this.loading = false
            Object.assign(this.propertyForm, response.data)
            if (this.propertyForm.openAlibabaCategoryId) {
              this.openAlibabaCategoryIds = this.propertyForm.openAlibabaCategoryId
            }
          })
        } else {
          this.propertyForm.goodsId = this.goodsObj.goodsId
          this.propertyForm.enterpriseId = this.getEnterpriseId()
          this.propertyForm.memberId = this.getMemberId()
          this.propertyForm.platformType = this.platformType
          this.propertyForm.shopId = this.shopId
        }
      },
      // 根据店铺初始化
      initByShopId() {
        // 获取运费模板
        getFreightTemplate(this.platformType, this.shopId).then(response => {
          if (response.isError) return
          this.freightTemplateList = response.data
        })
        // 获取发货地址
        getMySendAddress(this.platformType, this.shopId).then(response => {
          if (response.isError) return
          this.mySendAddressList = response.data
        })
      },
      // 关闭事件
      doClose() {
        this.$emit('callback', false)
      },
      // 保存事件
      doSave() {
        const openAlibabaCategoryIds = this.openAlibabaCategoryIds
        const openAlibabaCategoryId = Array.isArray(openAlibabaCategoryIds) ? openAlibabaCategoryIds[openAlibabaCategoryIds.length - 1] : openAlibabaCategoryIds
        this.propertyForm.openAlibabaCategoryId = openAlibabaCategoryId
        this.$refs['propertyForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            if (this.propertyForm.sendGoodsAddressId) {
              const arr = this.mySendAddressList.filter(item => item.id === this.propertyForm.sendGoodsAddressId)
              this.propertyForm.sendGoodsAddressText = arr[0].fullAddress.replaceAll('^^^', ' ')
            }
            saveThirdGoods(this.propertyForm).then(response => {
              this.loading = false
              if (response.isError) return
              this.$message({ type: 'success', message: '保存成功' })
              this.$emit('callback', true)
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>